<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <h3 class="form-setting-panel-title">{{field.displayName}}</h3>   
    <!-- end 标题 -->
    <p class="form-design-warning">{{$t('common.form.tip.systemTemplateTips')}}</p>
    <div class="form-setting-group">
      <el-checkbox :value="field.isNull" @input="update($event, 'isNull')" :true-label="0" :false-label="1">{{$t('common.base.isRequire')}}</el-checkbox>
    </div>

    <!-- TODO: 支持设置默认地址 -->
    <h3>{{$t('common.base.defaultAddress')}}</h3>

    <base-dist 
      @input="changeDefaultVal" 
      :value="distValue" 
      module="customer"
      :placeholder="$t('common.placeholder.selectArea')"
    />

    <p class="address-tip">{{$t('common.form.preview.address.des1')}}</p>
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
// 国际化灰度
import useFormMultiLanguage from '@hooks/useFormMultiLanguage'
const { internationalGray } = useFormMultiLanguage()
export default {
  name: 'customer-address-extend-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data(){
    return {
      internationalGray
    }
  },
  computed: {
    distValue() {
      return this.field.setting.customerAddressConfig
    }
  },
  methods: {
    changeDefaultVal(val) {
      const { country, province, city, dist, street = ''} = val || {}
      this.update({
        adCountry: country || '',
        adProvince: province || '',
        adCity: city || '',
        adDist: dist || '',
        ...(street && { adStreet: street})
      }, 'customerAddressConfig', true)
    },
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop)
    },
    update(value, prop, isSetting){
      this.$emit('input', {value, prop, isSetting})
    }
  }
}
</script>

<style lang="scss">
  .base-dist-picker  .el-cascader {
    width: 100%;
  }

  .address-tip {
    margin: 0;
    line-height: 30px;
    color: $text-color-secondary;
    font-size: $font-size-small;
  }

</style>